<template>
	<z-paging unit="px" class="normal-paging" :style="pageStyle" v-model="dataList" @query="queryList" ref="paging">
		<template #top>
			<slot name="top"></slot>
		</template>
		<block v-for="item in dataList" :key="item.id">
			<slot name="dataList" :item="item"></slot>
		</block>
	</z-paging>
</template>

<script>
	import {
		fansList,
		adminFansList,
		detailedList,
		followList,
		recordList,
		statisticsList,
		feedbackList,
		refundList,
		rechargeList,
		balanceLog
	} from '../../service/index.js'

	export default {
		props: {
			pageName: {
				type: String,
				default: ''
			},
			otherObj: {
				type: Object,
				default: () => ({})
			},
			pageStyle: {
				type: Object,
				default: () => ({
					paddingBottom: '100rpx'
				})
			}
		},
		name: "normal-paging",
		data() {
			return {
				dataList: [],
				listData: {},
				api: {
					'Fans': adminFansList,
					'Detailed': detailedList,
					'Follow': followList,
					'Record': recordList,
					'Refund': refundList,
					'Statistics': statisticsList,
					'FeedbackList': feedbackList,
					'RechargeRecord': rechargeList,
					'BalanceDetails': balanceLog
				}
			};
		},
		methods: {
			// 接收父组件传过来的刷新列表要求
			reload() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.reload();	
				})
			},
			// 接收父组件传过来的刷新列表要求-pageNo和pageSize不会重置，列表数据会重新从服务端获取。
			refresh() {
				this.$nextTick(() => {
					// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
					this.$refs.paging && this.$refs.paging.refresh();	
				})
			},
			async queryList(pageNo, pageSize) {
				try {
					const {
						data: {
							list,
							total,
						}
					} = await this.api[this.pageName]({
						page: pageNo,
						limit: pageSize,
						...this.otherObj
					})
					//将请求的结果数组传递给z-paging
					this.$refs.paging.complete(list || []);
					this.$emit('getList', total)
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.normal-paging {
		&-top-slot {
			margin-bottom: 18rpx;
		}
	}
</style>